.frame {
  position: absolute;
  width: 400px;
  height: 400px;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
  inset: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 2px;
  background: #8e44ad;
  color: #fff;
}

.egg {
  position: absolute;
  width: 100px;
  height: 130px;
  inset: 0;
  margin: auto;
  background: #fff;
  border-radius: 50px 50px 50px 50px/80px 80px 50px 50px;
  animation: egg 3s ease-in-out infinite;
  transform-origin: 50% 80%;
}

@keyframes egg {
  0% {
    transform: translate(0, -350px) scale(0.8, 1.2);
  }
  25% {
    transform: translate(0, 40px) scale(1.05, 0.9);
  }
  30% {
    transform: translate(0, -20px) scale(0.95, 1.02);
  }
  35% {
    transform: translate(0, 10px) scale(1.01, 0.98);
  }
  40%, 45% {
    transform: translate(0, 0) scale(1) rotate(0);
  }
  50% {
    transform: translate(0, 0) scale(1) rotate(5deg);
  }
  55% {
    transform: translate(0, 0) scale(1) rotate(-5deg);
  }
  60% {
    transform: translate(0, 0) scale(1) rotate(5deg);
  }
  65%, 70% {
    transform: translate(0, 0) scale(1) rotate(0);
  }
  75% {
    transform: translate(0, 10px) scale(1.01, 0.98);
  }
  80% {
    transform: translate(0, -20px) scale(1.02, 0.95);
  }
  100% {
    transform: translate(0, 350px) scale(0.9, 1.1);
  }
}